import styled from "./index.module.less";
import {
  Icon,
  LegacyCard,
  TextField,
  Button,
  Autocomplete,
  Tooltip,
  Toast,
  Frame,
  Popover,
  Badge,
} from "@shopify/polaris";
import { useState, useCallback, useMemo } from "react";
import {
  MobileBackArrowMajor,
  SearchMinor,
  EditMinor,
  CirclePlusMinor,
  ClipboardMinor,
  CirclePlusMajor,
  MobileCancelMajor,
} from "@shopify/polaris-icons";
import copy from "copy-to-clipboard";
import BeizhuModal from "./BeizhuModal";
import GuanlibiaoqianModal from "./GuanlibiaoqianModal";
import ChangeMaster from "./ChangeMaster";
import AddProduct from "./AddProduct";
import ChioceProduct from "./ChioceProduct";

interface BAFDAS {
  label: string;
  value: string;
}
const App = () => {
  const [Beizhu, setBeizhu] = useState(false);
  const [Guanlibiaoqian, setGuanlibiaoqian] = useState(false);
  const [changeMaster, setChangeMaster] = useState(false);
  const [addProduct, setAddProduct] = useState(false);
  const [chioceProduct, setChioceProduct] = useState(false);

  const [textFieldValue, setTextFieldValue] = useState("");

  const handleTextFieldChange = useCallback(
    (value: string) => setTextFieldValue(value),
    []
  );
  const [textFieldValueKH, setTextFieldValueKH] = useState("");

  const handleTextFieldChangeKH = useCallback(
    (value: string) => setTextFieldValueKH(value),
    []
  );

  //
  const deselectedOptions = useMemo(
    () => [
      { value: "rustic", label: "Rustic" },
      { value: "antique", label: "Antique" },
      { value: "vinyl", label: "Vinyl" },
    ],
    []
  );
  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
  const [inputValue, setInputValue] = useState("");
  const [options, setOptions] = useState(deselectedOptions);
  const [loading, setLoading] = useState(false);

  const updateText = useCallback(
    (value: string) => {
      setInputValue(value);

      if (!loading) {
        setLoading(true);
      }

      setTimeout(() => {
        if (value === "") {
          setOptions(deselectedOptions);
          setLoading(false);
          return;
        }
        const filterRegex = new RegExp(value, "i");
        const resultOptions = options.filter((option) =>
          option.label.match(filterRegex)
        );
        setOptions(resultOptions);
        setLoading(false);
      }, 300);
    },
    [deselectedOptions, loading, options]
  );

  const updateSelection = useCallback(
    (selected: string[]) => {
      const selectedText = selected.map((selectedItem) => {
        const matchedOption = options.find((option) => {
          return option.value.match(selectedItem);
        });
        return matchedOption && matchedOption.label;
      });
      setSelectedOptions(selected);
      setInputValue(selectedText[0] || "");
    },
    [options]
  );

  const textField = (
    <Autocomplete.TextField
      onChange={updateText}
      label=""
      value={inputValue}
      prefix={<Icon source={SearchMinor} />}
      placeholder="Search"
      autoComplete="off"
    />
  );

  //提示
  const [activeOne, setActiveOne] = useState(false);
  const toggleActiveOne = useCallback(() => {
    setActiveOne((activeOne) => !activeOne);
  }, []);
  const toastMarkup1 = activeOne ? (
    <Toast content="复制成功" onDismiss={toggleActiveOne} />
  ) : null;

  const [SBJDAS, setSBJDAS] = useState([] as BAFDAS[]);
  //标签
  const [textFieldValueBQ, setTextFieldValueBQ] = useState("");

  const handleTextFieldChangeBQ = useCallback((value: any) => {
    if (value.length > 0) {
      setPopoverActive(true);
    } else {
      setPopoverActive(false);
    }
    setTextFieldValueBQ(value);
  }, []);

  const [popoverActive, setPopoverActive] = useState(false);

  const togglePopoverActive = useCallback(
    () => setPopoverActive((popoverActive) => !popoverActive),
    []
  );

  const activator = (
    <TextField
      label=""
      value={textFieldValueBQ}
      onChange={handleTextFieldChangeBQ}
      autoComplete="off"
      // onClick={togglePopoverActive}
    />
  );
  return (
    <div className={styled.box}>
      <div className={styled.top}>
        <div className={styled.icon}>
          <Icon source={MobileBackArrowMajor}></Icon>
        </div>
        <div>创建订单</div>
      </div>
      <div className={styled.content}>
        <div className={styled.left}>
          <div className={styled.card1}>
            <LegacyCard sectioned>
              <div className={styled.AWNVGAD}>
                <div>产品</div>
                <div>
                  <Button
                    plain
                    onClick={() => {
                      setAddProduct(true);
                    }}
                  >
                    添加自定义项目
                  </Button>
                </div>
              </div>
              <div style={{ height: "28px" }}>
                <TextField
                  label=""
                  value={textFieldValue}
                  placeholder="搜索 产品"
                  onChange={handleTextFieldChange}
                  autoComplete="off"
                  prefix={
                    <div>
                      <Icon source={SearchMinor}></Icon>
                    </div>
                  }
                  connectedRight={
                    <Button
                      onClick={() => {
                        setChioceProduct(true);
                      }}
                    >
                      浏览
                    </Button>
                  }
                />
              </div>
            </LegacyCard>
          </div>
          <div className={styled.card2}>
            <LegacyCard>
              <div className={styled.MKLASS}>付款</div>
              <LegacyCard.Section>
                <div className={styled.PJOMAKWC}>
                  <div className={styled.NKASMDSD + " " + styled.ANJMASD}>
                    <div className={styled.AGBIWSVB}>小计</div>
                    <div className={styled.BSNKESD}></div>
                    <div className={styled.AWJKMVAN}>￥0.00</div>
                  </div>
                  <div className={styled.NKASMDSD}>
                    <div className={styled.AGBIWSVB}>添加折扣</div>
                    <div className={styled.BSNKESD}>一</div>
                    <div className={styled.AWJKMVAN}>￥0.00</div>
                  </div>
                  <div className={styled.NKASMDSD}>
                    <div className={styled.AGBIWSVB}>添加运费或配送费</div>
                    <div className={styled.BSNKESD}>一</div>
                    <div className={styled.AWJKMVAN}>￥0.00</div>
                  </div>
                  <div className={styled.NKASMDSD}>
                    <div className={styled.AGBIWSVB}>预计税费</div>
                    <div className={styled.BSNKESD}>未计算</div>
                    <div className={styled.AWJKMVAN}>￥0.00</div>
                  </div>
                  <div className={styled.NKASMDSD + " " + styled.ABWJKC}>
                    <div className={styled.AGBIWSVB}>总计</div>
                    <div className={styled.BSNKESD}></div>
                    <div className={styled.AWJKMVAN}>￥0.00</div>
                  </div>
                </div>
              </LegacyCard.Section>
              <LegacyCard.Section>
                <div>添加产品以计算总额并查看支付选项</div>
              </LegacyCard.Section>
              <LegacyCard.Section>
                <div>
                  在创建订单前,税费可能是估计值。详细了解{" "}
                  <Button plain>预计税费</Button>
                </div>
              </LegacyCard.Section>
            </LegacyCard>
          </div>
        </div>
        <div className={styled.right}>
          <div className={styled.card1}>
            <LegacyCard sectioned>
              <div className={styled.IUHNEA}>
                <div>备注</div>
                <div
                  className={styled.HENIJMAKLC}
                  onClick={() => {
                    setBeizhu(true);
                  }}
                >
                  <Icon source={EditMinor} color="subdued"></Icon>
                </div>
              </div>
              <div className={styled.AWFDHJV}>没有备注</div>
            </LegacyCard>
          </div>
          <div className={styled.card1}>
            <LegacyCard sectioned>
              <div className={styled.IUHNEA}>
                <div>客户</div>
              </div>
              {!inputValue && (
                <div className={styled.AWFDHJV}>
                  <Autocomplete
                    actionBefore={{
                      accessibilityLabel: "Action label",
                      content: "创建新客户",
                      icon: CirclePlusMinor,
                      wrapOverflow: true,
                      onAction: () => {
                        console.log("actionBefore clicked!");
                      },
                    }}
                    options={options}
                    selected={selectedOptions}
                    onSelect={updateSelection}
                    listTitle=""
                    loading={loading}
                    textField={textField}
                  />
                </div>
              )}
              {inputValue && (
                <div>
                  <div>
                    <div>
                      <Button plain>JessicaMalambri</Button>
                    </div>
                    <div className={styled.NEKSZX}>1订单</div>
                  </div>
                  <div>
                    <div className={styled.ABSNSDS}>联系信息</div>
                    <div className={styled.HIANWFC}>
                      <div>
                        <Button plain>lendaver@vip.qq.com</Button>
                      </div>
                      <Tooltip content="复制电子邮件地址">
                        <div
                          className={styled.HENIJMAKLC}
                          onClick={() => {
                            copy("lendaver@vip.qq.com");
                            setActiveOne(true);
                          }}
                        >
                          <Icon source={ClipboardMinor} color="subdued"></Icon>
                        </div>
                      </Tooltip>
                    </div>
                    <div className={styled.NEKSZX}>没有电话号码</div>
                  </div>
                  <div>
                    <div className={styled.ABSNSDS}>收货地址</div>
                    <div className={styled.AJWNDMNBVC}>
                      <div className={styled.IHWNCS}>
                        <div>Malambri Jessica</div>
                        <div>2006 Indiana Avenue</div>
                        <div>NEW ALBANY MB R3W 1N2</div>
                        <div>加拿大</div>
                      </div>
                      <Tooltip content="复制地址">
                        <div
                          className={styled.HENIJMAKLC}
                          onClick={() => {
                            copy(
                              "Malambri Jessica 2006 Indiana Avenue NEW ALBANY MB R3W 1N2 加拿大"
                            );
                            setActiveOne(true);
                          }}
                        >
                          <Icon source={ClipboardMinor} color="subdued"></Icon>
                        </div>
                      </Tooltip>
                    </div>
                  </div>
                  <div>
                    <div className={styled.ABSNSDS}>账单地址</div>
                    <div className={styled.NEKSZX}>与收货地址相同</div>
                  </div>
                </div>
              )}
            </LegacyCard>
          </div>
          <div className={styled.card1}>
            <LegacyCard sectioned>
              <div className={styled.IUHNEA}>
                <div>市场</div>
                <div
                  className={styled.HENIJMAKLC}
                  onClick={() => {
                    setChangeMaster(true);
                  }}
                >
                  <Icon source={EditMinor} color="subdued"></Icon>
                </div>
              </div>
              <div className={styled.AWFDHJV}>
                <p>主要市场</p>
                <p>中国(CNY ￥)</p>
              </div>
            </LegacyCard>
          </div>
          <div className={styled.card1}>
            <LegacyCard sectioned>
              <div className={styled.IUHNEA}>
                <div>标签</div>
                <div
                  className={styled.HENIJMAKLC}
                  onClick={() => {
                    setGuanlibiaoqian(true);
                  }}
                >
                  <Icon source={EditMinor} color="subdued"></Icon>
                </div>
              </div>
              <div className={styled.AWFDHJV}>
                <Popover
                  active={popoverActive}
                  activator={activator}
                  autofocusTarget="first-node"
                  onClose={togglePopoverActive}
                >
                  <div
                    style={{
                      width: "300px",
                      padding: "12px",
                      boxSizing: "border-box",
                    }}
                  >
                    <div
                      style={{
                        width: "100%",
                        padding: "8px",
                        boxSizing: "border-box",
                        display: "flex",
                        backgroundColor: "rgba(0,0,0,0.2)",
                        borderRadius: "5px",
                      }}
                      onClick={() => {
                        setSBJDAS([
                          ...SBJDAS,
                          { label: textFieldValueBQ, value: textFieldValueBQ },
                        ]);
                        setTextFieldValueBQ("");
                        setPopoverActive(false);
                      }}
                    >
                      <div>
                        <Icon source={CirclePlusMajor} color="subdued"></Icon>
                      </div>
                      <div>添加{textFieldValueBQ}</div>
                    </div>
                  </div>
                </Popover>
              </div>
              <div>
                {SBJDAS && (
                  <div
                    style={{
                      display: "flex",
                      flexWrap: "wrap",
                      marginTop: "12px",
                    }}
                  >
                    {SBJDAS.map((item, index) => {
                      return (
                        <div
                          key={index}
                          style={{
                            marginRight: "8px",
                            display: "flex",
                            padding: "2px 6px",
                            backgroundColor: "rgba(0,0,0,0.2)",
                            borderRadius: "14px",
                          }}
                        >
                          <div>{item.label}</div>
                          <div
                            style={{ cursor: "pointer" }}
                            onClick={() => {
                              const abifk = SBJDAS;
                              let t = abifk.splice(index, 1);
                              setSBJDAS([...abifk]);
                            }}
                          >
                            <Icon
                              source={MobileCancelMajor}
                              color="subdued"
                            ></Icon>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            </LegacyCard>
          </div>
        </div>
      </div>
      {/* 组件 */}
      {Beizhu && <BeizhuModal active={Beizhu} setActive={setBeizhu} />}
      {Guanlibiaoqian && (
        <GuanlibiaoqianModal
          active={Guanlibiaoqian}
          setActive={setGuanlibiaoqian}
          SBJDAS={SBJDAS}
          setSBJDAS={setSBJDAS}
        />
      )}
      {changeMaster && (
        <ChangeMaster active={changeMaster} setActive={setChangeMaster} />
      )}
      {addProduct && (
        <AddProduct active={addProduct} setActive={setAddProduct} />
      )}
      {chioceProduct && (
        <ChioceProduct active={chioceProduct} setActive={setChioceProduct} />
      )}
      {/* 组件 */}
      {activeOne && <Frame>{toastMarkup1}</Frame>}
    </div>
  );
};

export default App;
